<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 模块快速使用</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
  <style>
    /* 偶数行背景色 */
    .layui-table[lay-even] tr:nth-child(even) {
        /* background-color: #aaffaa; */
        background-color: #eeffee;
    }

    /* 鼠标指向表格时,奇数行背景颜色 */
    .layui-table tbody tr:hover,.layui-table-hover {
        background-color: #eeffee;
    }

    /* 表格头部工具栏背景色 */
    .layui-table-tool {
        background-color: #eeffee;
    }

    /* 表格头部背景色 */
    th {
        background-color: #359f6a; /* MediumSeaGreen */
        color: #fff;
        font-weight: bold
    }
  </style>
<body>

<table id="demo" lay-filter="test"></table>

<script src="/static/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    ,toolbar: true
    ,even: true//控制隔行变颜色
    // ,height: 312
    ,url: '/static/json/other_1.json' //数据接口
    ,page: false //开启分页
    ,cols: [[ //表头
      {field: 'num1', title: '代号', width:100}
      ,{field: 'color1', title: '代表颜色', width:100}
      ,{field: 'num2', title: '代号', width:100}
      ,{field: 'color2', title: '代表颜色', width: 100}
    ]]
  });

});
</script>
</body>
</html>